<template>
  <div>
    <Form :label-width="118" :model="formData" ref="formItem" :rules="infoRules">
      <FormItem label="类型">
        <RadioGroup v-model="formData.type">
          <Radio :label="1" :value="1" :disabled="modalType == 'edit' ? true : false">
            列表
          </Radio>
          <Radio :label="2" :value="2" :disabled="modalType == 'edit' ? true : false">
            单页
          </Radio>
        </RadioGroup>
      </FormItem>
      <!-- <FormItem label="模板">
        <Select label="科普" required>
          <Option value="科普">科普</Option>
          <Option value="活动">活动</Option>
          <Option value="视频">视频</Option>
        </Select>
      </FormItem> -->
      <FormItem label="上级栏目" prop="parentId">
        <Select label="" v-model="formData.parentId" :disabled="isedtor">
          <Option :value="'0'">顶级栏目</Option>
          <template v-for="item in parentList">  
            <Option    
            v-if="item.value!=editInfo.id"        
            :value="item.value"
            :key="item.value"            
            >{{ item.label }}</Option
          >
          </template>
          
        </Select>
      </FormItem>
      <FormItem
        v-if="formData.type == 1"
        prop="title"
        label="栏目标题"
      >
        <Input
          v-if="modalType == 'edit'"
          type="text"
          v-model="formData.title"
        />
        <Input
          v-else
          type="textarea"
          :rows="3"
          v-model="formData.title"
          placeholder="支持批量录入，一行一条记录"
        />
      </FormItem>
      <FormItem
        v-if="formData.type == 2"
        prop="title"
        label="栏目标题"
      >
        <Input placeholder="请输入栏目标题" type="text" v-model="formData.title" />
      </FormItem>
      <FormItem label="视频ID" v-if="formData.type == 2" prop="video_id">
          <Input
            placeholder="请输入视频ID,视频ID从视频后台获取"
            v-model="formData.video_id"
          />
      </FormItem>
      <FormItem label="视频封面" v-if="formData.type == 2" prop="cover_img" :rules="formData.video_id?[{ required: true, message: '请选择封视频封面', trigger: 'bulr' }]:infoRules.cover_img">
        <div v-if="formData.cover_img" class="demo-upload-list">
          <img :src="formData.cover_img" width="100" height="100" />
          <div class="demo-upload-list-cover">
                <Icon type="ios-trash-outline" @click="formData.cover_img=''"></Icon>
            </div>
        </div>
        <div class="imageUpdate">
          <Upload
            ref="upload"
            name="file"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :format="['jpg', 'jpeg', 'png']"
            :action="requestAction"
            :before-upload="handleBefore"
          >
            <div>
              <Button
                type="primary"
                class="ivu-mr-8"
                size="small"
                :loading="loading"
              >
                {{ loading ? "上传中..." : "上传" }}
              </Button>
            </div>
          </Upload>
          <Button type="success" size="small" @click="showImgModel = true"
            >选择</Button
          >
        </div>
      </FormItem>
      <FormItem
        v-if="formData.type == 2"
        prop="content"
        label="内容"
      >
        <!-- <Input type="textarea" :rows="6" placeholder="文章编辑器占位符" v-model="formData.content"/> -->
        <ckeditor
          :editor="editor"
          v-model="formData.content"
          :config="editorConfig"
        ></ckeditor>
      </FormItem>

      <FormItem label="状态" prop="status">
        <Switch v-model="formData.status" />
      </FormItem>
      <FormItem v-if="formData.type ==1" label="首页展示" prop="homeShow">
        <Switch v-model="formData.homeShow" />
      </FormItem>
    </Form>
    <glo-check v-model="showImgModel" @getImgArr="getImgArr" />
  </div>
</template>
<script>
import { parentLists, listsCreate } from "@/api/jzy.js";
import { updatefileTemp } from '@/api/set.js'
import Setting from "@/setting";
import util from "@/libs/util";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKEditor from "@ckeditor/ckeditor5-vue";
const ckUpload = require("../../../libs/ckeditorUplodImg5");
export default {
  name: "modalName",
  props: ["modalType", "editInfo"],
  components: { ckeditor: CKEditor.component },
  data() {
    return {
      editor: ClassicEditor,
      editorConfig: {
        extraPlugins: [ckUpload.MyCustomUploadAdapterPlugin],
        fullscreen: {
          // 点击按钮后会执行的回调函数
          handler: () => {
            // this.modalstatus = true;
          },
        },
        material: {
          // 点击按钮后会执行的回调函数
          handler: () => {
            this.askData();
            this.modalstatus = true;
            this.showlink = true;
            this.img = "";
            this.isDobule = true;
          },
        },
        mediaEmbed: {
            providers: [{
            name: 'myprovider',
            url: [
              /^lizzy.*\.com.*\/media\/(\w+)/,
              /^www\.lizzy.*/,
              /^.*/
            ],
            html: match => {
              //获取媒体url
              const input = match['input'];
            //console.log('input' + match['input']);
              return (
                '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +
                  `<iframe src="${input}" ` +
                    'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
                    'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
                  '</iframe>' +
                '</div>'
              );
            }
          }]
        }
      },
      requestAction: "",
      showImgModel: false,
      loading: false,
      baseUrl: Setting.request.apiBaseURL,
      formData: {
        parentId: '0',
        title: "",
        content: "",
        status: true,
        type: 1,
        homeShow: false,
        cover_img:'',
        video_id:''
      },
      infoRules: {
        parentId: [{ required: true, message: "请选择上级栏目", trigger: "bulr" }],
        title: [{ required: true, message: "请输入栏目标题", trigger: "bulr" }],
        content:[{ required: true, message: "请输入单页内容", trigger: "bulr" }],
        cover_img:[{ required: false, trigger: "bulr" }],
      },
      isedtor: false,
      parentList: []
    };
  },
  methods: {
    handleBefore () {
      this.loading = true
    },
    handleSuccess (response, file, fileList) {
      this.formData.cover_img = `${response.data.host}${response.data.image_url[0]}`
      this.loading = false
      const id = response.data.image_id[0]
      updatefileTemp({ id })
    },
    getImgArr (arr) {
      this.formData.cover_img = arr[0]
    },
    saveData() {
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          let parms = {
            type: this.formData.type,
            pid: this.formData.parentId,
            name: this.formData.title,
            status: this.formData.status ? "1" : "0",
            home_show: this.formData.homeShow ? "1" : "2",
            cover_img:this.formData.cover_img,
            video_id:this.formData.video_id,
            page_content:this.formData.content
          };
          if (this.modalType == "edit") {
            parms.id = this.editInfo.id;
          }          
          listsCreate(parms).then((res) => {
            this.$emit("refresh",false);
          });
        }
      });
    },
  },
  watch: {
    editInfo() {
      this.isedtor = false;
      if (this.modalType == "edit") {
        this.isedtor = this.editInfo.children.length > 0 ? true : false;
        this.formData = {
          parentId: this.editInfo.pid,
          title: this.editInfo.name,
          status: this.editInfo.status == 1 ? true : false,
          type: +this.editInfo.type,
          homeShow: this.editInfo.home_show == 1 ? true : false,
          content:this.editInfo.page_content,
          cover_img:this.editInfo.cover_img,
          video_id:this.editInfo.video_id,
        };
      } else if (this.modalType == "addChild") {
        this.isedtor = true;
        this.formData = {
          parentId: this.editInfo.pid,
          title: "",
          content: "",
          status: true,
          type: 1,
          homeShow: false,   
          cover_img:'',
          video_id:'',       
        };
      } else {
        this.formData = {
          parentId: '0',
          title: "",
          content: "",
          status: true,
          type: 1,
          homeShow: false,
          cover_img:'',
          video_id:'',
        };
      }
    },
  },
  mounted() {
    this.requestAction =
      this.baseUrl +
      `/v1/upload/images?auth_access_token=${util.cookies.get(
        "token"
      )}&auth_project_id=${localStorage.getItem('currentProject')}`
    parentLists().then((res) => {
      this.parentList = res;
    });
  },
};
</script>
<style lang='less'>
.imageUpdate {
  display: flex;
}
.ck.ck-editor__main > .ck-editor__editable {
  height: 200px;
}
.ivu-modal {
  top: 30px;
}
.ivu-form-item:last-child {
  margin-bottom: 0;
}
.imageUpdate{
  line-height: 1;
}

.demo-upload-list{
    display: inline-block;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
}
.demo-upload-list img{
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
    display: block;
}
.demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>
